<template>
  <div class="home">
    <div class="top">
      <van-row align="center">
        <van-col span="21">
          <van-search placeholder="输入商户名或菜名" shape="round" @focus="goSearch">
            <div slot="left-icon">
              <van-icon name="search" color="#111" />
            </div>
          </van-search>
        </van-col>
        <van-col span="2">
          <van-icon name="comment" color="#fdbf2d" size="30" />
        </van-col>
      </van-row>
    </div>
    <van-grid :border="false" :column-num="4">
      <van-grid-item v-for="(item, index) in navList" :key="index">
        <van-image
          class="navimg"
          round
          :src="item.categoryImg"
          width="50"
          height="50"
        />
        <span class="navTitle">{{item.categoryName}}</span>
      </van-grid-item>
    </van-grid>
    <van-row justify="space-between" type="flex">
      <van-col span="4">
        <van-image
          src="https://img.meituan.net/msmerchant/0bed179ba3ae804d3b4f152e9f56dbe127816.jpg.webp@120w_120h_1e_1c_1l|watermark=1&&r=1&p=9&x=2&y=2&relative=1&o=20"
          height="60"
        />
      </van-col>
      <van-col span="4">
        <van-image
          src="https://img.meituan.net/msmerchant/0bed179ba3ae804d3b4f152e9f56dbe127816.jpg.webp@120w_120h_1e_1c_1l|watermark=1&&r=1&p=9&x=2&y=2&relative=1&o=20"
          height="60"
        />
      </van-col>
      <van-col span="4">
        <van-image
          src="https://img.meituan.net/msmerchant/0bed179ba3ae804d3b4f152e9f56dbe127816.jpg.webp@120w_120h_1e_1c_1l|watermark=1&&r=1&p=9&x=2&y=2&relative=1&o=20"
          height="60"
        />
      </van-col>
      <van-col span="4">
        <van-image
          src="https://img.meituan.net/msmerchant/0bed179ba3ae804d3b4f152e9f56dbe127816.jpg.webp@120w_120h_1e_1c_1l|watermark=1&&r=1&p=9&x=2&y=2&relative=1&o=20"
          height="60"
        />
      </van-col>
      <van-col span="4">
        <van-image
          src="https://img.meituan.net/msmerchant/0bed179ba3ae804d3b4f152e9f56dbe127816.jpg.webp@120w_120h_1e_1c_1l|watermark=1&&r=1&p=9&x=2&y=2&relative=1&o=20"
          height="60"
        />
      </van-col>
    </van-row>
    <div class="banner">
      <img src="../assets/images/首页广告.png" alt="" width="345px">
    </div>
    <van-tabs v-model="active" :swipe-threshold="5" title-active-color="#ffda67" color="#ffda67" line-width="20" line-height="2">
      <van-tab>
        <div slot="title" class="tabTitle">推荐</div>
        <van-row class="tabCon" justify="space-around" type="flex">
          <van-col span="9">
            <van-image height="200" src="https://p1.meituan.net/deal/e1821687e763c94389dcd4d3c8d08efd19520.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0"/>
          </van-col>
          <van-col span="9">
            <van-image height="200" src="https://p1.meituan.net/deal/e1821687e763c94389dcd4d3c8d08efd19520.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0"/>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab>
        <div slot="title" class="tabTitle">附近</div>
        <van-row class="tabCon" justify="space-around" type="flex">
          <van-col span="9">
            <van-image height="200" src="https://p1.meituan.net/deal/e1821687e763c94389dcd4d3c8d08efd19520.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0"/>
          </van-col>
          <van-col span="9">
            <van-image height="200" src="https://p1.meituan.net/deal/e1821687e763c94389dcd4d3c8d08efd19520.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0"/>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab>
        <div slot="title" class="tabTitle">达人</div>
        <van-row class="tabCon" justify="space-around" type="flex">
          <van-col span="9">
            <van-image height="200" src="https://p1.meituan.net/deal/e1821687e763c94389dcd4d3c8d08efd19520.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0"/>
          </van-col>
          <van-col span="9">
            <van-image height="200" src="https://p1.meituan.net/deal/e1821687e763c94389dcd4d3c8d08efd19520.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0"/>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab>
        <div slot="title" class="tabTitle">菜谱</div>
        <van-row class="tabCon" justify="space-around" type="flex">
          <van-col span="9">
            <van-image height="200" src="https://p1.meituan.net/deal/e1821687e763c94389dcd4d3c8d08efd19520.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0"/>
          </van-col>
          <van-col span="9">
            <van-image height="200" src="https://p1.meituan.net/deal/e1821687e763c94389dcd4d3c8d08efd19520.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0"/>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab>
        <div slot="title" class="tabTitle">视频</div>
        <van-row class="tabCon" justify="space-around" type="flex">
          <van-col span="9">
            <van-image height="200" src="https://p1.meituan.net/deal/e1821687e763c94389dcd4d3c8d08efd19520.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0"/>
          </van-col>
          <van-col span="9">
            <van-image height="200" src="https://p1.meituan.net/deal/e1821687e763c94389dcd4d3c8d08efd19520.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0"/>
          </van-col>
        </van-row>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      navList: []
    }
  },
  created () {
    this.getCategory()
  },
  methods: {
    goSearch () {
      this.$router.push('/search')
    },
    async getCategory () {
      const res = await this.$http.get('category')
      this.navList = res.data.data
      console.log(res)
    }
  }
}
</script>

<style scoped lang="less">
.home {
  margin-top: 55px;
  padding: 0 10px;
}
.top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.van-search__content {
  box-shadow: 1px 1px 14px -8px #000;
}
.van-col--2 {
  height: 54px;
  display: flex;
  align-items: center;
}
.navTitle {
  font-size: 13px;
  color: #222;
  margin-top: 5px;
}
.van-image.navimg {
  box-shadow: 1px 1px 20px -8px #000;
}
.banner {
  margin-top: 10px;
  text-align: center;
}
.tabTitle {
  font-size: 14px;
  font-weight: 700;
}
.tabCon {
  padding: 10px 0;
}
</style>
